﻿<html>
<head>
<title>Page</title>
<style type="text/css">

div.div_1 {
	width:300px;
	height:300px;
	background-color:#f00;
}

div.div_2 {
	width:300px;
	height:300px;
	background-color:#0f0;
}

div.div_2_1 {
	width:150px;
	height:150px;
	background-color:#00f;
	float:left;
}

div.div_2_2 {
	width:150px;
	height:150px;
	background-color:#0ff;
	float:left;
	display:none;
}

</style>
<script>
var t;
function mouseoverDiv_2_1(o) {
	var div_2_2 = document.getElementById("div_2_2");
	div_2_2.style.display = "block";
}

function mouseoutDiv_2_1(o) {
	t = setTimeout("doMouseoutDiv_2_1()", 1000);
}

function doMouseoutDiv_2_1(o) {
	var div_2_2 = document.getElementById("div_2_2");
	div_2_2.style.display = "none";
}

function mouseoverDiv_2_2(o) {
	clearTimeout(t);
}

function mouseoutDiv_2_2(o) {
	var div_2_2 = document.getElementById("div_2_2");
	div_2_2.style.display = "none";
}

function myOnLoad() {
	//mouseoverDiv_2_1();
}

document.body.onload = myOnLoad();

console.log("test my log");

</script>

</head>
<body onload="myOnLoad();">
<div class="div_1" id="div_1">

</div>

<div class="div_2">
<div class="div_2_1" onmouseover="mouseoverDiv_2_1(this)" onmouseout="mouseoutDiv_2_1(this)">
<div style="background-color:#ff0;width:150px;height:150px;">
</div>
</div>
<div class="div_2_2" id="div_2_2" onmouseover="mouseoverDiv_2_2()" onmouseout="mouseoutDiv_2_2(this)">
</div>
</div>

</body>
</html>